<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>找回密码</title>
<link type="text/css" rel="stylesheet" href="css/password.css" />
    <link rel="stylesheet" href="../plugins/elementui/index.css" />
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
    <script src="js/healthmobile.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <script src="../plugins/elementui/index.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	var height=$(document).height();
	$('.main').css('height',height);
})
</script>
</head>

<body>
<div class="main" id="app">
  <div class="main0">
     <div class="formBox">
       <h3>登录密码重置</h3>
       <ul>
          <li class="mainCol firLi">&gt;身份验证</li>
          <li>&gt;登录密码重置</li>
          <li class="lastLi">&gt;重置完成</li>
       </ul>
       <img src="images/line.png" />
       <!--<div class="itembox">
         <label>手机号码&nbsp;:</label>
         <input type="text" placeholder="请输入注册手机号"></span>
       </div>-->
         <div class="itembox itembox_2">
             <label>手机号&nbsp;:</label>
             <input type="text" placeholder="请输入注册手机号" class="yzm" v-model="loginInfo.telephone"></span>
             <input style="width: 120px" id="validateCodeButton" @click="sendValidateCode()" type="button" value="发送验证码" class="but"></span>
         </div>
         <div class="itembox itembox_2">
             <label>验证码&nbsp;:</label>
             <input type="text" placeholder="请输入验证码" class="yzm" v-model="loginInfo.validateCode"></span>
         </div>
       <div class="btnBox" id="btn" style="display: none">
            <!--<button onclick="window.location.href='password_2.html'">下一步</button>-->
            <button @click="next()">下一步</button>
       </div>
     </div>
  </div>
</div>

<script type="text/javascript">

    var vue = new Vue({
        el:'#app',
        data:{
            //验证码信息
            loginInfo:{}
        },
        methods:{
            //跳转下一步
            next(){
                //获取用户的手机号
                var telephone = this.loginInfo.telephone;
                //调用js方法，校验输入的手机号是否合法
                if (!checkTelephone(telephone)) {
                    //校验不通过，提示错误信息
                    this.$message({
                        type:'error',
                        message:"请输入正确的手机号哦~",
                        center:true
                    });
                    return false;
                };
                //发送AJAX请求比对验证码
                axios.post("/validateCode/checkIdByTel.do",this.loginInfo).then((response) => {
                    if(response.data.flag){
                        //登录成功,跳转到下一页
                        window.location.href='password_2.html';
                    }else{
                        //失败，提示失败信息
                        this.$message.error("验证码输入错误");
                    }
                });

            },
            //发送验证码
            sendValidateCode(){
                //获取用户的手机号
                var telephone = this.loginInfo.telephone;
                //调用js方法，校验输入的手机号是否合法
                if (!checkTelephone(telephone)) {
                    //校验不通过，提示错误信息
                    this.$message({
                        type:'error',
                        message:"请输入正确的手机号哦~",
                        center:true
                    });
                    return false;
                }
                //在按钮上显示46秒倒计时
                //锁定dom对象(jquery转换成js对象)
                // validateCodeButton = $("#validateCodeButton")[0];
                //jquery转换成js对象（原始方法）
                validateCodeButton=document.getElementById("validateCodeButton");
                //定时器方法，可以实现每隔指定时间调用指定方法
                clock = window.setInterval(doLoop,1000);
                //发送Ajax请求，为用户发送手机验证码
                axios.post("/validateCode/send4ChangePassword.do?telephone="+telephone).then((res)=>{
                    if(!res.data.flag){
                        //短信发送失败
                        this.$message({
                            type:'error',
                            message:res.data.message,
                            center:true
                        });
                    }
                });
                //显示下一步按钮
                //document.getElementById("btn").style.display="block";
                $("#btn").show();
            }
        }
    });
</script>
</body>
</html>
